import 'package:flutter/material.dart';
import 'package:kxy_flutter_app/components/exam_card_dot/answered_dot.dart';
import 'package:kxy_flutter_app/components/exam_card_dot/un_answer_dot.dart';
import 'package:kxy_flutter_app/model/exam_question.dart';

class QuestionCardView extends StatelessWidget {
  final Function(int) onSelect;
  final List<Question> questionList;

  const QuestionCardView({
    Key key,
    @required this.questionList,
    @required this.onSelect,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text('答题卡'),
        leading: IconButton(
          icon: Icon(Icons.close),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
      body: ListView(
        padding: EdgeInsets.all(20),
        children: [
          header(),
          quesListWidgt(context),
        ],
      ),
    );
  }

  

  Widget header() {
    return Container(
      child: Row(
        children: [
          Row(children: [
            UnAnswerDot(),
            Padding(
              padding: EdgeInsets.only(left: 10),
              child: AnsweredDot(),
            ),
          ]),
        ],
      ),
    );
  }

  Widget quesListWidgt(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 20),
      child: Wrap(
        spacing: 20,
        runSpacing: 15,
        children: questionList.map((item) {
          var index = questionList.indexOf(item);
          return quesCardItem(index, item, context);
        }).toList(),
      ),
    );
  }

  Widget quesCardItem(int index, Question ques, BuildContext context) {
    Color labelColor;
    Decoration decoration;
    if (ques.answered) {
      labelColor = Colors.white;
      decoration = answeredDecoration();
    } else {
      labelColor = Color.fromRGBO(136, 136, 136, 1);
      decoration = unAnsweredDecoration();
    }

    return GestureDetector(
      onTap: () {
        Navigator.of(context).pop();
        onSelect(index);
      },
      child: Container(
        height: 36,
        width: 36,
        alignment: Alignment.center,
        decoration: decoration,
        child: Text(
          (index + 1).toString(),
          style: TextStyle(color: labelColor),
        ),
      ),
    );
  }

  Decoration answeredDecoration() {
    return BoxDecoration(
      shape: BoxShape.circle,
      color: Color.fromRGBO(77, 160, 255, 1),
      border: Border.all(
        color: Color.fromRGBO(50, 146, 255, 1),
      ),
    );
  }

  Decoration unAnsweredDecoration() {
    return BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.white,
      border: Border.all(
        color: Color.fromRGBO(204, 204, 204, 1),
      ),
    );
  }
}
